<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view style="margin-top: 20upx;">
					<view class="cell flex-row flex-y-center">
						<text class="label">{{typeName}}</text>
						<view class="right flex-grow-1 flex-row flex-y-center">
							<input class="input" type="text" :value="data.type==1?data.info.nickname:(data.info.real_name?data.info.real_name:'')" maxlength="10" :placeholder="'请输入'+typeName" @input="onInput"/>
						</view>
					</view>
					<view class="cell flex-row flex-y-center" v-if="data.type==2">
						<text class="label">身份证</text>
						<view class="right flex-grow-1 flex-row flex-y-center">
							<input class="input" type="number" :value="data.info.id_card" :placeholder="'请输入身份证号码'" @input="onIdInput"/>
						</view>
					</view>
					<button class="flex-y-content button" @tap="submit">提交</button>
				</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
					type: 1,
					value1: '',
					value2: '',
					info: {}
				}
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
				myVue.setData({type: t.type})
				this.getInfo()
    },
		onShow: function() {
        myVue.getApp.page.onShow(this);
    },
		computed: {
			typeName() {
				var type = myVue.data.type
				if(type==1){
					return "昵称"
				}else if(type==2){
					return "姓名"
				}
			}
		},
		methods:{
			onInput(e){
				myVue.setData({value1:e.detail.value})
			},
			onIdInput(e){
				myVue.setData({value2:e.detail.value})
			},
			submit(){
				var type = myVue.data.type,data={},value1 = myVue.data.value1,value2 = myVue.data.value2;
				if(type==1){
					data = {
						type: type,
						nickname: value1
					}
				}else if(type==2){
					data = {
						type: type,
						real_name: value1,
						id_card: value2
					}
				}
				var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				if(type==2&&value1.length>0&&value2.length>0){
					if(idcardReg.test(value2)){
						myVue.update(data)
					}else{
						myVue.getApp.core.showToast({
							title: '请填写正确的身份证号码',
							mask: true,
							icon: 'none'
						})
					}
				}else if(type==1){
					myVue.update(data)
				}else{
					myVue.getApp.core.showToast({
						title: '请填写完整信息',
						mask: true,
						icon: 'none'
					})
				}
			},
			update: function(data){
				myVue.getApp.request({
					url: myVue.getApp.api.new.update_user_info,
					data: data,
					method: "POST",
					success: function(res){
						res.code==0 && myVue.getApp.core.navigateBack()
					}
				})
			},
			getInfo: function(){
				var type = myVue.data.type
				myVue.getApp.request({
					url: myVue.getApp.api.new.get_user_info,
					success: function(res){
						res.code==0 && myVue.setData({
							info: res.data,
							value1: type==1?res.data.nickname:res.data.real_name,
							value2: res.data.id_card
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.cell{
		width: 100%;
		height: 100upx;
		background-color: #FFFFFF;
		padding: 0 30upx;
		justify-content: space-between;
	}
	.cell .label{
		width: 120upx;
		font-size: 32upx;
		color: #333333;
	}
	.cell .right{
		justify-content: flex-start;
	}
	.cell .input{
		font-size: 32upx;
		flex: 1;
		padding-left: 20upx;
	}
	.button{
		width: 690upx;
		margin-left: 30upx;
		margin-top: 60upx;
		background-color: #ff4544;
    color: #fff;
    font-weight: bold;
    height: 80upx;
    line-height: 80upx;
	}
	.button.disabled{
		
	}
</style>
